<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">{{title}}</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            style="margin-left: 10px"
            label-position="left"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input :disabled="taskName != '发起'" style="width: 400px" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="需求单位" prop="demand_unit">
                <el-cascader
                    :disabled="taskName != '发起'"
                    :props="{ value: 'id', checkStrictly: true }"
                    :show-all-levels="false"
                    @change="demandUnitChange"
                    v-model="form.demand_unit"
                    placeholder="请选择，可搜索"
                    :options="dept"
                    clearable
                    filterable
                ></el-cascader>
            </el-form-item>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio :disabled="taskName != '发起'" label="true">是</el-radio>
                            <el-radio :disabled="taskName != '发起'" label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="Auditunit"
                    >
                        <el-cascader
                            :disabled="taskName != '发起'"
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="auditUnitChange"
                            v-model="form.audit_unit"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="Subhead">需求信息</div>
        <div class="tabletitle">
            IP资源申请明细
            <!-- <Button>
                添加
            </Button> -->
            <img v-if="taskName == '发起'" style="width: 20px;cursor: pointer;vertical-align: middle;" @click="add()" src="../../../assets/icons/add.png" alt="">
        </div>
        <Table v-loading="loading" :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="applicationSystem">
                <el-select :disabled="taskName != '发起'" clearable filterable v-model="data[index].applicationSystem">
                    <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id">
                    </el-option>
                </el-select>
            </template>

            <template slot-scope="{ row, index }" slot="IpType">
                <el-select :disabled="taskName != '发起'" clearable filterable style="width: 200px" v-model="data[index].IpType">
                    <el-option v-for="item in IpTypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template slot-scope="{ row, index }" slot="PortManage">
                <el-select :disabled="taskName != '发起'" clearable filterable style="width: 200px" v-model="data[index].PortManage">
                    <el-option v-for="item in TypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </template>

            <template slot-scope="{ row, index }" slot="port">
                <Input
                    :disabled="taskName != '发起'"
                    type="text"
                    v-model="data[index].port"
                />
            </template>
            <template slot-scope="{ row, index }" slot="portType">
                <el-select :disabled="taskName != '发起'" clearable filterable style="width: 200px" v-model="data[index].portType">
                    <el-option v-for="item in portTypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template slot-scope="{ row, index }" slot="remarks">
                <Input
                    :disabled="taskName != '发起'"
                    type="text"
                    v-model="data[index].remarks"
                />
            </template>

            <template v-if="taskName == '发起'" slot-scope="{ row, index }" slot="action">
                <Button type="error" @click="remove(index)">删除</Button>
            </template>
        </Table>
       <action-button v-if="taskName" :taskName="taskName" :loading="btnLoading" @changeExamineShow="changeExamineShow"/>
        <el-dialog :title="num==1?'通过':'不通过'" :visible.sync="visible" append-to-body>
          <el-form ref="form" :model="form"  label-width="100px">
            <el-form-item label="意见:">
              <el-input type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入意见"
                v-model="comment">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button :loading="btnLoading" type="primary" @click="changeExamineShow(num,true)">确 定</el-button>
            <el-button :loading="btnLoading" @click="visible=false">取 消</el-button>
          </div>
        </el-dialog>
    </div>
</template>
<script>
import { treeselect } from "@/api/system/dept";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { Getformdata,taskComplete } from "@/api/todoItem/todo.js";
	import actionButton from "@/components/actionButton/index.vue";
export default {
    name: "IPResourceManagerdetails",
	components:{
		actionButton
	},
    data() {
        return {
            loading:false,
            visible:false,
            num:1,
            comment:'',
            taskName:'',
            title:'',
            taskId:'',
            definitionName:'',
            btnLoading:true,
            form: {
                title: "",
                demand_unit: null,
                unit_audit: 'false',
                audit_unit: null,
                ipList:[]
            },
            IsUnitAudit: false,
            officeId: null,
            Auditunit: null,
            //部门列表树结构
            dept: [],
            deptId:sessionStorage.getItem('deptId'),
            rules: {
                name: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
            },
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            columns: [
                {
                    title: "应用系统",
                    slot: "applicationSystem",
                },
                {
                    title: "IP类型",
                    slot: "IpType",
                },
                {
                    title: "端口管理",
                    slot: "PortManage",
                },
                {
                    title: "端口",
                    slot: "port",
                },
                {
                    title: "端口类型",
                    slot: "portType",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            data: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem:'',
            editIpType:'',
            editPortManage:'',
            editport:'',
            editportType:'',
            editremarks:'',
            //上云系统列表
            xtList: [],
            // Ip类型数据
            IpTypeList:[
                {
                    id:'BGP',
                    name:'BGP'
                },
                {
                    id:'普通互联网',
                    name:'普通互联网'
                },
                {
                    id:'政务外网',
                    name:'政务外网'
                },
                {
                    id:'其他',
                    name:'其他'
                }
            ],
            // Ip类型数据
            TypeList:[
                {
                    id:'开放',
                    name:'开放'
                },
                {
                    id:'关闭',
                    name:'关闭'
                },
                {
                    id:'映射',
                    name:'映射'
                }
            ],
            // Ip类型数据
            portTypeList:[
                {
                    id:'TCP',
                    name:'TCP'
                },
                {
                    id:'UDP',
                    name:'UDP'
                },
                {
                    id:'TCP/UDP',
                    name:'TCP/UDP'
                }
            ]
        };
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        },
        routerUrl(){
            return this.$route.path
        }
    },
    watch: {
        visitedViews(value) {
            if(value){
                if(this.$options.name == 'IPResourceManagerdetails'){
                    return
                }
                this.$destroy(this.$options.name)
            }
        },
        routerUrl(value){
            if(value == '/resources/IPResourceManagers/details'){
                this.Getdata()
            }
        }
    },
    created() {
        this.Getdata()
    },
    methods: {
        demandUnitChange(e){
            if (e.length) {
                this.form.demand_unit = e[e.length - 1];
            }
        },
        auditUnitChange(e){
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
            }
        },
        Getdata(){
            this.getListDept();
            var list = JSON.parse(sessionStorage.getItem('IPResourceManager'));
            this.title = list.instanceName;
            this.taskId = list.taskId;
            this.definitionName = list.definitionName;
            this.taskName = list.taskName;
            this.btnLoading = false
            Getformdata(list.instanceId).then(res=>{
                this.form = res.data
                if(this.form.unit_audit == 'true'){
                    this.IsUnitAudit = true
                }
                this.data = res.data.ipList
            })
        },
        UnitAuditChange(e) {
            if(e == 'true'){
                this.IsUnitAudit = true
                this.form.audit_unit = Number(this.deptId)
            }else{
                this.IsUnitAudit = false
                this.form.audit_unit = null
            }
        },
        //数据列表
        getListDept() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
            this.loading = true
            AllcloudUpList().then(response => {
                this.xtList = response.rows;
                this.loading = false
            })
        },
        add() {
            let addObj = JSON.parse(JSON.stringify({
                applicationSystem: '',
                IpType: '',
                PortManage: '开放',
                port: '',
                portType: 'TCP',
                remarks:''
            }))
            this.data.push(addObj);
        },
        remove(index) {
            this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.data.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        sumit(){
            this.form.ipList = this.data
            let obj = {
                formData: this.form,
                formDefKey:'ipResourceManagement',
                title:this.form.title,
            }
            definition(obj).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.form = {}
                    this.form.demand_unit = Number(this.deptId)
                    this.form.unit_audit = 'false'
                    this.form.audit_unit = null
                }
            })
        },
        changeExamineShow(num,flag){
         this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
         inputValue:num == 1 ? '通过': '不通过',
         }).then((resp) => {
                this.loading = true
                this.form.ipList = this.data
                taskComplete({
                    taskId: this.taskId,
                    actionName: num == 1 ? '通过': '不通过',
                    action: num == 1 ? 'COMPLETE': 'BACK',
                    formData: this.form,
                    formDefKey:this.form.formDefKey,
                    comment:resp.value
                }).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            type: 'success',
                            message: res.msg
                        });
                        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                        this.$destroy(this.$options.name)
                        this.$router.push('/todoItem/todo')
                        this.loading = false
                    }
                })
                .catch(err=>{
                    this.loading = false
                })
            })
        }
    },
};
</script>
<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle{
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248,248,249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>
